<template>
  <div class="app-container home">
    <!-- 统计卡片 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6" :lg="6" v-for="(item, index) in statCards" :key="index">
        <el-card class="stat-card" :body-style="{background: item.background}" shadow="hover">
          <div class="stat-content">
            <div class="stat-info">
              <div class="stat-value">{{ item.value }}</div>
              <div class="stat-title">{{ item.title }}</div>
            </div>
            <div class="stat-icon-container">
              <el-icon><component :is="item.icon"></component></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 机会数据分析 -->
    <el-row :gutter="20" class="mt20">
      <el-col :span="24">
        <el-card class="section-card" shadow="hover">
          <template #header>
            <div class="section-header">
              <div class="section-title">
                <el-icon class="section-icon"><Opportunity /></el-icon>
                <span>机会相关数据分析</span>
              </div>
            </div>
          </template>
          
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="8" :lg="8">
              <div class="chart-title">发布数据</div>
              <div class="chart-container" id="opportunityTrendChart"></div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8">
              <div class="chart-title">评论数据</div>
              <div class="chart-container" id="opportunityCommentChart"></div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8">
              <div class="chart-title">分类数据</div>
              <div class="chart-container" id="opportunityCategoryChart"></div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分享数据分析 -->
    <el-row :gutter="20" class="mt20">
      <el-col :span="24">
        <el-card class="section-card" shadow="hover">
          <template #header>
            <div class="section-header">
              <div class="section-title">
                <el-icon class="section-icon"><Share /></el-icon>
                <span>分享相关数据分析</span>
              </div>
            </div>
          </template>
          
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="8" :lg="8">
              <div class="chart-title">发布数据</div>
              <div class="chart-container" id="shareTrendChart"></div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8">
              <div class="chart-title">评论数据</div>
              <div class="chart-container" id="shareCommentChart"></div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8">
              <div class="chart-title">标签数据</div>
              <div class="chart-container" id="shareTagChart"></div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 用户数据和内容列表 -->
    <el-row :gutter="20" class="mt20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="section-card" shadow="hover">
          <template #header>
            <div class="section-header">
              <div class="section-title">
                <el-icon class="section-icon"><User /></el-icon>
                <span>在线用户数据分析</span>
              </div>
            </div>
          </template>
          <div class="chart-container" id="userTrendChart"></div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="section-card" shadow="hover">
          <template #header>
            <div class="section-header">
              <div class="section-title">
                <el-icon class="section-icon"><Bell /></el-icon>
                <span>公告栏</span>
              </div>
            </div>
          </template>
          <div class="list-card-container" v-loading="noticeLoading">
            <div v-if="latestNotices.length === 0" class="empty-data">暂无公告</div>
            <div v-for="(item, index) in latestNotices" :key="index" class="list-item">
              <div class="list-item-title">{{ item.noticeTitle }}</div>
              <div class="list-item-date">{{ parseTime(item.createTime) }}</div>
            </div>
            <div class="view-more">
              <el-button type="primary" link @click="goTo('/backend/notice')">查看更多</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted, nextTick, onActivated, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { parseTime } from '@/utils/ruoyi'
import * as echarts from 'echarts'
import { Share, View, ChatDotSquare, Opportunity, User, Bell } from '@element-plus/icons-vue'
import { listNotice } from '@/api/backend/notice'
import { listShare } from '@/api/backend/share'
import { listShareComment } from '@/api/backend/shareComment'
import { listShareTag } from '@/api/backend/shareTag'
import { listComment } from '@/api/backend/comment'
import { listOpportunity } from '@/api/backend/opportunity'
import { listOpportunityCategory } from '@/api/backend/opportunityCategory'
import { listFrontUser } from '@/api/backend/frontUser'

const router = useRouter()
const route = useRoute()
const version = ref('3.8.7')
const today = ref(parseTime(new Date(), '{y}年{m}月{d}日'))

// 统计卡片数据
const statCards = ref([
  { title: '机会总数', value: 0, icon: 'Opportunity', background: 'linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)' },
  { title: '分享总数', value: 0, icon: 'Share', background: 'linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)' },
  { title: '用户数量', value: 0, icon: 'User', background: 'linear-gradient(120deg, #f093fb 0%, #f5576c 100%)' },
  { title: '评论总数', value: 0, icon: 'ChatDotSquare', background: 'linear-gradient(120deg, #fad0c4 0%, #ffd1ff 100%)' }
])

// 最新公告
const latestNotices = ref([])
const noticeLoading = ref(false)

// 热门分享
const popularShares = ref([])
const shareLoading = ref(false)

// 自定义图表数据！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
const chartData = {
  // 机会数据
  opportunityTrend: [12, 11, 4, 11, 14, 9, 12], // 发布数据
  opportunityComment: [8, 14, 17, 19, 23, 20, 13], // 评论数据
  // 分享数据
  shareTrend: [12, 15, 8, 11, 6, 10, 11], // 发布数据
  shareComment: [27, 20, 16, 13, 8, 22, 9] // 评论数据
}

// 初始化数据
onMounted(() => {
  initData()
})

// 当组件被激活时（从缓存中恢复）
onActivated(() => {
  initData()
})

// 监听路由变化
watch(
  () => route.path,
  (newPath, oldPath) => {
    if (newPath === '/') {
      initData()
    }
  }
)

// 初始化所有数据
function initData() {
  // 先获取基础数据
  fetchStatData()
  fetchLatestNotices()
  fetchPopularShares()
  
  // 使用延迟加载确保DOM已经渲染完成
  setTimeout(() => {
    initAllCharts()
  }, 500)
}

// 初始化并加载所有图表
function initAllCharts() {
  // 机会数据图表
  initAndLoadChart('opportunityTrendChart', createBarOption(
    getLastSevenDays(),
    chartData.opportunityTrend,
    '机会数量',
    ['#5470c6', '#91cc75']
  ))
  
  initAndLoadChart('opportunityCommentChart', createLineOption(
    getLastSevenDays(),
    chartData.opportunityComment,
    '评论数量',
    '#5470c6',
    'rgba(84, 112, 198, 0.5)',
    'rgba(84, 112, 198, 0.1)'
  ))
  
  initAndLoadChart('opportunityCategoryChart', () => {
    fetchOpportunityCategoryData('opportunityCategoryChart', '机会分类')
  })
  
  // 分享数据图表
  initAndLoadChart('shareTrendChart', createBarOption(
    getLastSevenDays(),
    chartData.shareTrend,
    '分享数量',
    ['#83bff6', '#188df0']
  ))
  
  initAndLoadChart('shareCommentChart', createLineOption(
    getLastSevenDays(),
    chartData.shareComment,
    '评论数量',
    '#fc8452',
    'rgba(252, 132, 82, 0.5)',
    'rgba(252, 132, 82, 0.1)'
  ))
  
  initAndLoadChart('shareTagChart', () => {
    fetchShareTagData('shareTagChart', '分享标签')
  })
  
  // 用户数据图表
  initAndLoadChart('userTrendChart', createLineOption(
    getLastSevenDays(),
    // 手动更改！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
    [20, 35, 45, 60, 75, 85, 95],
    '用户数量',
    '#1890ff',
    'rgba(24, 144, 255, 0.5)',
    'rgba(24, 144, 255, 0.1)',
    true,
    0,
    10
  ))
}

// 初始化并加载单个图表
function initAndLoadChart(domId, optionOrCallback) {
  const dom = document.getElementById(domId)
  if (!dom) {
    console.warn(`Chart container not found: ${domId}`)
    return null
  }
  
  const chart = echarts.init(dom)
  
  // 添加resize事件
  window.addEventListener('resize', () => {
    chart && chart.resize()
  })
  
  // 根据传入的类型设置图表配置
  if (typeof optionOrCallback === 'function') {
    optionOrCallback(chart)
  } else {
    chart.setOption(optionOrCallback)
  }
  
  return chart
}

// 创建柱状图配置
function createBarOption(xData, yData, seriesName, colors = ['#5470c6', '#91cc75']) {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '10%',
      right: '5%',
      bottom: '10%',
      top: '10%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: xData,
      axisTick: {
        alignWithLabel: true
      }
    }],
    yAxis: [{
      type: 'value',
      minInterval: 1
    }],
    series: [{
      name: seriesName,
      type: 'bar',
      barWidth: '60%',
      data: yData,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: colors[0] },
          { offset: 1, color: colors[1] }
        ])
      }
    }]
  }
}

// 创建折线图配置
function createLineOption(xData, yData, seriesName, color, areaStartColor, areaEndColor, showArea = true, min = null, step = null) {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      }
    },
    grid: {
      left: '10%',
      right: '5%',
      bottom: '10%',
      top: '10%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: xData,
      axisTick: {
        alignWithLabel: true
      }
    }],
    yAxis: [{
      type: 'value',
      minInterval: 1,
      min: min !== null ? min : undefined,
      interval: step !== null ? step : undefined
    }],
    series: [{
      name: seriesName,
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      data: yData,
      lineStyle: {
        width: 3,
        color: color
      },
      itemStyle: {
        color: color,
        borderWidth: 2,
        borderColor: '#fff'
      }
    }]
  }
  
  // 如果需要显示面积
  if (showArea && areaStartColor && areaEndColor) {
    option.series[0].areaStyle = {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: areaStartColor },
        { offset: 1, color: areaEndColor }
      ])
    }
  }
  
  return option
}

// 生成过去七天的日期列表
function getLastSevenDays() {
  const dates = []
  const now = new Date()
  for (let i = 6; i >= 0; i--) {
    const date = new Date(now)
    date.setDate(date.getDate() - i)
    dates.push(parseTime(date, '{m}-{d}'))
  }
  return dates
}

// 获取统计数据
async function fetchStatData() {
  try {
    // 获取机会总数
    const opportunityRes = await listOpportunity({ pageNum: 1, pageSize: 1 })
    if (opportunityRes.code === 200) {
      statCards.value[0].value = opportunityRes.total || 0
    }
    
    // 获取分享总数
    const shareRes = await listShare({ pageNum: 1, pageSize: 1 })
    if (shareRes.code === 200) {
      statCards.value[1].value = shareRes.total || 0
    }
    
    // 获取用户总数
    const userRes = await listFrontUser({ pageNum: 1, pageSize: 1 })
    if (userRes.code === 200) {
      statCards.value[2].value = userRes.total || 0
    } else {
      statCards.value[2].value = 128 // 默认值
    }
    
    // 获取评论总数
    const commentRes = await listComment({ pageNum: 1, pageSize: 1 })
    if (commentRes.code === 200) {
      statCards.value[3].value = commentRes.total || 0
    } else {
      statCards.value[3].value = 256 // 默认值
    }
  } catch (error) {
    console.error('获取统计数据失败', error)
  }
}

// 获取机会分类数据
async function fetchOpportunityCategoryData(domId, titleText) {
  try {
    const chart = echarts.getInstanceByDom(document.getElementById(domId))
    if (!chart) return
    
    // 使用pageSize=100确保获取全部分类
    const res = await listOpportunityCategory({ pageNum: 1, pageSize: 100 })
    if (res.code === 200 && res.rows && res.rows.length > 0) {
      // 确保有至少一个数据，即使全部为0
      let data = res.rows.map(item => ({
        name: item.categoryName || '未分类',
        value: parseInt(item.opportunityCount || 0)
      }))
      
      // 过滤掉value为0的数据项
      const validData = data.filter(item => item.value > 0)
      
      // 如果有效数据小于2项，使用模拟数据
      if (validData.length < 2) {
        console.log('机会分类有效数据不足，使用模拟数据')
        data = [
          { name: '竞赛活动', value: 35 },
          { name: '等级考试', value: 12 },
          { name: '实习就业', value: 25 },
          { name: '考研信息', value: 18 },
          { name: '政策补贴', value: 10 }
        ]
      } else {
        data = validData
      }
      
      // 设置饼图配置
      const colors = [
        '#4e7bec', '#5cb87a', '#f8cb4a', '#e15b64', '#58c8da', 
        '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'
      ]
      
      createPieChart(chart, titleText, data, colors)
    } else {
      // 如果没有数据或API响应不正确，显示模拟数据
      showMockOpportunityCategoryData(chart, titleText)
    }
  } catch (error) {
    console.error('获取机会分类数据失败', error)
    const chart = echarts.getInstanceByDom(document.getElementById(domId))
    if (chart) {
      showMockOpportunityCategoryData(chart, titleText)
    }
  }
}

// 显示模拟机会分类数据
function showMockOpportunityCategoryData(chart, titleText) {
  const mockData = [
    { name: '竞赛活动', value: 35 },
    { name: '等级考试', value: 12 },
    { name: '实习就业', value: 25 },
    { name: '考研信息', value: 18 },
    { name: '政策补贴', value: 10 }
  ]
  
  const colors = [
    '#4e7bec', '#5cb87a', '#f8cb4a', '#e15b64', '#58c8da', 
    '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'
  ]
  
  createPieChart(chart, titleText, mockData, colors)
}

// 创建通用饼图
function createPieChart(chart, titleText, data, colors) {
  chart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: 10,
      top: 'center',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        fontSize: 12
      },
      data: data.map(item => item.name)
    },
    series: [
      {
        name: titleText,
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: data
      }
    ],
    color: colors
  })
}

// 获取分享标签数据
async function fetchShareTagData(domId, titleText) {
  try {
    const chart = echarts.getInstanceByDom(document.getElementById(domId))
    if (!chart) return
    
    // 使用pageSize=100确保获取全部标签
    const res = await listShareTag({ pageNum: 1, pageSize: 100 })
    if (res.code === 200 && res.rows && res.rows.length > 0) {
      // 统计每个标签的使用次数
      // 这里将标签数据处理为饼图数据
      let data = res.rows.map(item => ({
        name: item.tagName || '未分类',
        value: parseInt(item.useCount || 0)
      }))
      
      // 过滤掉value为0的数据项
      const validData = data.filter(item => item.value > 0)
      
      // 如果有效数据小于2项，使用模拟数据
      if (validData.length < 2) {
        console.log('分享标签有效数据不足，使用模拟数据')
        data = [
          { name: '技术分享', value: 28 },
          { name: '学习心得', value: 15 },
          { name: '资源分享', value: 22 },
          { name: '求职经验', value: 18 },
          { name: '校园活动', value: 12 }
        ]
      } else {
        data = validData
      }
      
      // 设置饼图配置
      const colors = [
        '#f25f5c', '#65bef0', '#50c48f', '#ff9649', '#a37bdb',
        '#ea7ccc', '#5470c6', '#91cc75', '#fac858'
      ]
      
      createPieChart(chart, titleText, data, colors)
    } else {
      // 如果没有数据或API响应不正确，显示模拟数据
      showMockShareTagData(chart, titleText)
    }
  } catch (error) {
    console.error('获取分享标签数据失败', error)
    const chart = echarts.getInstanceByDom(document.getElementById(domId))
    if (chart) {
      showMockShareTagData(chart, titleText)
    }
  }
}

// 显示模拟分享标签数据
function showMockShareTagData(chart, titleText) {
  const mockData = [
    { name: '技术分享', value: 28 },
    { name: '学习心得', value: 15 },
    { name: '资源分享', value: 22 },
    { name: '求职经验', value: 18 },
    { name: '校园活动', value: 12 }
  ]
  
  const colors = [
    '#f25f5c', '#65bef0', '#50c48f', '#ff9649', '#a37bdb',
    '#ea7ccc', '#5470c6', '#91cc75', '#fac858'
  ]
  
  createPieChart(chart, titleText, mockData, colors)
}

// 获取最新公告
async function fetchLatestNotices() {
  noticeLoading.value = true
  try {
    const res = await listNotice({ pageNum: 1, pageSize: 5 })
    if (res.code === 200) {
      latestNotices.value = res.rows || []
    }
  } catch (error) {
    console.error('获取最新公告失败', error)
  } finally {
    noticeLoading.value = false
  }
}

// 获取热门分享
async function fetchPopularShares() {
  shareLoading.value = true
  try {
    const res = await listShare({ pageNum: 1, pageSize: 5, orderByColumn: 'viewCount', isAsc: 'desc' })
    if (res.code === 200) {
      popularShares.value = res.rows || []
    }
  } catch (error) {
    console.error('获取热门分享失败', error)
  } finally {
    shareLoading.value = false
  }
}

// 查看分享详情
function viewShareDetail(share) {
  router.push({ path: `/backend/share/detail/${share.shareId}` })
}

// 页面跳转
function goTo(url) {
  router.push(url)
}
</script>

<style scoped lang="scss">
.home {
  .mt20 {
    margin-top: 20px;
  }
  
  // 统计卡片样式
  .stat-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    margin-bottom: 15px;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.1);
    }
    
    .stat-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      
      .stat-info {
        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: white;
          margin-bottom: 5px;
        }
        
        .stat-title {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.8);
        }
      }
      
      .stat-icon-container {
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        font-size: 24px;
        color: white;
      }
    }
  }
  
  // 图表卡片样式
  .section-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    
    .section-header {
      padding: 16px 20px;
      border-bottom: 1px solid #f0f0f0;
      
      .section-title {
        display: flex;
        align-items: center;
        
        .section-icon {
          font-size: 20px;
          margin-right: 8px;
          color: #1890ff;
        }
        
        span {
          font-size: 16px;
          font-weight: 600;
          color: #262626;
        }
      }
    }
  }
  
  .chart-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    
    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid #f0f0f0;
      
      span {
        font-size: 16px;
        font-weight: 600;
        color: #262626;
      }
    }
  }
  
  .chart-title {
    font-size: 14px;
    font-weight: 500;
    color: #595959;
    text-align: center;
    margin: 16px 0 8px;
  }
  
  .chart-container {
    height: 300px;
    width: 100%;
  }
  
  // 标签页样式
  .dashboard-tabs {
    :deep(.el-tabs__header) {
      margin-bottom: 0;
      padding: 0 16px;
      background-color: #fff;
      border-radius: 12px 12px 0 0;
    }

    :deep(.el-tabs__nav-wrap::after) {
      height: 1px;
      background-color: #f0f0f0;
    }

    :deep(.el-tabs__item) {
      height: 48px;
      line-height: 48px;
      font-size: 14px;
    }

    :deep(.el-tabs__active-bar) {
      height: 3px;
      border-radius: 3px;
    }
  }
  
  // 列表样式
  .list-card {
    border-radius: 0 0 12px 12px;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08);
    
    .empty-data {
      height: 120px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #8c8c8c;
      font-size: 14px;
    }
    
    .list-item {
      display: flex;
      justify-content: space-between;
      padding: 16px 20px;
      transition: all 0.2s ease;
      border-bottom: 1px solid #f0f0f0;
      
      &:hover {
        background-color: #f5f5f5;
      }
      
      &:last-child {
        border-bottom: none;
      }
      
      .list-item-title {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        color: #262626;
        
        &:hover {
          color: #1890ff;
        }
      }
      
      .list-item-date, .list-item-meta {
        margin-left: 15px;
        color: #8c8c8c;
        font-size: 13px;
      }
      
      .list-item-meta {
        span {
          margin-left: 15px;
          display: inline-flex;
          align-items: center;
          
          .el-icon {
            margin-right: 5px;
            font-size: 16px;
          }
          
          &:first-child {
            margin-left: 0;
          }
        }
      }
    }
    
    .view-more {
      display: flex;
      justify-content: center;
      padding: 12px;
      border-top: 1px solid #f0f0f0;
      background-color: #fafafa;
    }
  }
  
  // 列表容器样式
  .list-card-container {
    padding: 0;
    
    .empty-data {
      height: 120px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #8c8c8c;
      font-size: 14px;
    }
    
    .list-item {
      display: flex;
      justify-content: space-between;
      padding: 16px 20px;
      transition: all 0.2s ease;
      border-bottom: 1px solid #f0f0f0;
      
      &:hover {
        background-color: #f5f5f5;
      }
      
      &:last-child {
        border-bottom: none;
      }
      
      .list-item-title {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        color: #262626;
        
        &:hover {
          color: #1890ff;
        }
      }
      
      .list-item-date {
        margin-left: 15px;
        color: #8c8c8c;
        font-size: 13px;
      }
    }
    
    .view-more {
      display: flex;
      justify-content: center;
      padding: 12px;
      border-top: 1px solid #f0f0f0;
      background-color: #fafafa;
    }
  }
}

// 响应式调整
@media screen and (max-width: 768px) {
  .home {
    .chart-container {
      height: 250px;
    }
  }
}

@media screen and (max-width: 576px) {
  .home {
    .chart-container {
      height: 200px;
    }
  }
}
</style>

